<template>
    <div class="register">
        <mt-header :fixed="false" mtClass="no-bg" title="注册" rightName="登录" leftName="off" @leftEvent="leftEvent" @rightEvent="rightEvent"/>
        <div class="list">
            <div class="inputPhone">
                <mt-field placeholder="请输入手机号" type="tel"  v-model="inputValuePhone"></mt-field>
            </div>
            <div class="countdown">
                <countdown @sendValueToParent="getValueFromChild" :mobile="inputValuePhone"></countdown>
            </div>
            <div class="inputShareCode">
                <mt-field placeholder="请输入注册码(必填)" type="text" v-model="inputValueShareCode"></mt-field>
            </div>
        </div>
        <div class="default-btn">
            <mt-button type="primary" size="large" :disabled="(inputValuePhone&&inputValueCode&&inputValueShareCode)?false:true" @click.native="register">注册</mt-button>
        </div>
        <div class="tips">点击注册意味着你同意<span @click="toviewfile">《Reading Box用户服务协议与隐私政策》</span></div>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'
import mtHeader from "@/components/Header"
import countdown from "@/components/Countdown"
import { Toast } from 'mint-ui';
import { validatePhone } from '@/utils/validate'
import { Register } from '@/api/login'
export default {
    name: 'register',
    data(){
        return {
            inputValuePhone:'',
            inputValueCode:'',
            inputValueShareCode:''
        }
    },
    components:{
        mtHeader,
        countdown
    },
    methods:{
        ...mapMutations('app', [
            'set_isShowLoginModal'
        ]),
        register(){
            if( validatePhone(this.inputValuePhone) ){
                Register({
                    mobile: this.inputValuePhone,
                    validationCode: this.inputValueCode,
                    inviteCode: this.inputValueShareCode
                }).then(res=>{
                    if( res.code == 200 ){
                        Toast({
                            message: '注册成功',
                        });
                    }else{
                        Toast({
                            message: res.msg,
                            iconClass: 'icon iconfont icon-dingdanzhuangtaishibai'
                        })
                    }
                })
            }else{
                Toast({
                    message: '请输入正确格式的手机号',
                    className: 'innputPhoneToast'
                });
            }
        },
        getValueFromChild(value){
            this.inputValueCode = value;
        },
        toviewfile(){
            this.$emit('rightEvent',4);
        },
        leftEvent(){
            this.set_isShowLoginModal(false)
        },
        rightEvent(value){
            this.$emit('rightEvent',value);
        }
    }
}
</script>

<style lang="stylus" scoped>
.register{
    height:100%;
    .list{
        margin-top:25px;
    }
    .tips{
        text-align:center;
        position:absolute;
        bottom:25px;
        left:0;
        width:100%;
        span{
            color:#5F88FF;
            font-weight:bold;
        }
    }
    .pdf{
        width:100%;
        position: absolute;
        top: 0;
        bottom: 0;
        background: #fff;
        &>div{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%);
        }
        &>span{
            font-size:20px;
            position:absolute;
            top:10px;
            left:10px;
        }
    }
}
</style>

